<template>
	<view class="withDraw">
		<view class="block">
			<view class="title">
				提现金额
			</view>
			<view class="line">
				<text class="unit">
					￥
				</text>
				<input type="text" v-model="formLine.extract_price" class="ipt" @input="getPrice"
					placeholder-class="styles">
			</view>
			<view class="footersss">
				<text class="txt1">可提现余额￥{{now_money}}</text>
				<text class="txt2" @click="allTixian">全部提现</text>
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;background: #f6f6f6;"></view>
		<view class="block">
			<view class="title">
				提现到
			</view>
			<view class="account-warp">
				<view class="account-warp-item" v-for="(item, index) in accountList" :key="index"
					@click="setIndex(index)">
					<image class="icon" :src="item.url" mode=""></image>
					<view class="name">{{item.title}}</view>
					<image class="select-img"
						:src="formLine.extract_type == index?'../../static/images/selectActive.png':'../../static/images/select.png'"
						mode=""></image>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn" @click="onSave">立即提现</view>
		</view>
	</view>
</template>

<script>
		import reqApi from "../../api/api.js";
	export default {
		data() {
			return {
				accountList: [

					{
						url: "../../static/images/bankcard.png",
						title: "银行账户"
					},
					{
						url: "../../static/images/weixin.png",
						title: "微信账户"
					},
					{
						url: "../../static/images/zhifubao.png",
						title: "支付宝账户"
					}
				],
				formLine: {
					extract_type: 0, //0 银行卡 1 微信 2 支付宝
					extract_price: ""
				},
				now_money: 0
			}
		},
		onShow() {
			let userInfo = uni.getStorageSync("userInfo");
			this.now_money = userInfo.now_money;
		},
		methods: {
			onSave(){
				if(!this.formLine.extract_price){
					uni.showToast({
						title: "提现金额不能为空",
						icon: 'none',
						mask: true,
						duration: 1500,
					})
					return
				}
				reqApi.createExtract(this.formLine).then(res=>{
					uni.showToast({
						title: "申请已提交",
						icon: 'none',
						mask: true,
						duration: 1500,
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:"/pages/mine/myEarnings"
						})
					}, 1500)
				})
			},
			setIndex(index) {
				this.formLine.extract_type = index;
			},
			getPrice() {
				if (Number(this.formLine.extract_price) - Number(this.now_money) > 0) {
					uni.showToast({
						title: "提现金额不能大于当前余额",
						icon: 'none',
						mask: true,
						duration: 1500,
					})
					return
				}
			},
			allTixian() {
				this.formLine.extract_price = this.now_money;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer {
		padding: 0 70rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 30rpx;
		width: 100%;

		.btn {
			width: 100%;
			height: 88rpx;
			background: #EEA800;
			border-radius: 88rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}
	}

	.account-warp {
		.account-warp-item {
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.icon {
				width: 80rpx;
				height: 80rpx;
			}

			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #222222;
				flex: 1;
				padding: 0 22rpx;
				box-sizing: border-box;
			}

			.select-img {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.withDraw {
		.block {
			padding: 30rpx;
			box-sizing: border-box;
			background: #fff;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
			}

			.line {
				display: flex;
				justify-content: space-between;
				height: 82rpx;
				align-items: center;
				border-bottom: 2rpx solid #eee;

				.unit {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
					margin-right: 20rpx;
				}

				.ipt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #222;
					flex: 1;
				}

				.styles {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #CCCCCC;
				}
			}

			.footersss {
				display: flex;
				margin-top: 20rpx;

				.txt1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					margin-right: 8rpx;
				}

				.txt2 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #4FAEF2;
				}
			}
		}
	}
</style>
